<template>
  <div class="login">
    <a-card hoverable>
      <div class="content">
        <div class="photo">
          <img src="/login.svg"/>
        </div>
        <div class="info">
          <div class="name">
            <p>Api Doc</p>
          </div>
          <a-form
              :model="formState"
              name="basic"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 14 }"
              autocomplete="off"
              label-align="right"
              @finish="onFinish"
              style="width: 500px;"
          >
            <a-form-item
                label="账号"
                name="account"
                :rules="[{ required: true, message: '请输入账号！！！' }]"
            >
              <a-input v-model:value="formState.account">
                <template #prefix>
                  <component is="UserOutlined" style="margin-right: 5px; color: #a6a6af;"/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item
                label="密码"
                name="password"
                :rules="[{ required: true, message: '请输入密码！！！' }]"
            >
              <a-input-password v-model:value="formState.password">
                <template #prefix>
                  <component is="LockOutlined" style="margin-right: 5px; color: #a6a6af;"/>
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="default" html-type="submit" @click.prevent="router.push({name:'register'})">注册
              </a-button>
              <a-button style="margin-left: 150px" type="primary" html-type="submit">登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {message} from 'ant-design-vue';
import {cookie} from "@/utils/cookie.ts";
import axios from "@/axios";
import router from "@/router";

interface FormState {
  account: string;
  password: string;
}

const loading = ref<boolean>(false);

const formState = reactive<FormState>({
  account: '',
  password: '',
});
const onFinish = () => {
  axios.post("/login", formState).then((response: any) => {
    if (response.code === 20000) {
      // 将token保存至cookie
      cookie.set("token", response.data.token);
      message.success('登录成功');
      router.push({name: 'home'})
    } else {
      message.warn(response.message);
    }
  })
};


</script>

<style scoped lang="less">
.login {
  margin: auto;
  //padding-top: 90px;
  width: 400px;
  display: flex;
  // 水平居中
  justify-content: space-around;
  align-items: center;

  .content {
    width: 1000px;
    height: 600px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    .photo {
      width: 600px;
      border-right: #7e8186 solid 1px;
    }

    .info {
      .name {
        padding-right: 80px;
        text-align: center;
        font-size: 55px;
        font-family: STCaiyun, serif;

        p {
          margin-bottom: 25px;
        }
      }
    }
  }
}
</style>